// 全局样式
.van-nav-bar {
  background-color: #3196fa;

  .van-nav-bar__title {
    color: #fff;
  }
}

/** 整个应用的容器是百分百布局 **/
#app {
  position: absolute;
  left    : 0;
  top     : 0;
  overflow: hidden;
  width   : 100%;
  height  : 100%;
}

/** .container是Layout.vue组件的根元素的类名 **/
.container {
  width : 100%;
  height: 100%;
}

/** .index 是home/home.vue组件的根元素的类名 **/
.index {
  height     : 100%;
  // 让出顶部导航条的距离
  // 顶部在导航条是固定定位的
  padding-top: 46px;

  // #app >.container >.index > .van-tabs > van-tabs__wrap + van-tabs__content
  .van-tabs {
    padding-top   : 50px;
    display       : flex;
    flex-direction: column;
    height        : 100%;

    .van-tabs__wrap {
      position: fixed;
      top     : 46px;
      /** 跟在顶部固定导航条的下方 **/
      left    : 0px;
      right   : 30px;

      /** 标记当前选中频道的下划线 **/
      .van-tabs__line {
        width           : 30px !important;
        background-color: #3296fa;
        bottom          : 20px;
      }
    }

    .van-tabs__content {
      flex          : 1;
      overflow      : hidden;
      padding-bottom: 4rem;

      /** 能看到文章列表中的loading效果 **/
      .van-tab__pane {
        height: 100%;

        /** .scroll-wrapper 是home/ArticleList.vue组件的根元素的类名 **/
        .scroll-wrapper {
          overflow: auto;
          height  : 100%;
        }
      }
    }
  }
}